<template>
	<view class="topic">
<!-- 		<view class="timu acea-row row-column">
			<text class="fs-34 color333">1、您是否有其他疾病？</text>
			<text class="base">健康基础</text>
		</view>
		<view class="list acea-row row-column row-middle row-center">
			<block v-for="(item,index) in 3" :key="index">
				<view class="item acea-row row-middle" :class="index==Sindex?'on':''" @click="select(index)">
					<text class="iconfont icon-danxuan-xuanzhong" v-if="index==Sindex"></text>
					<text class="iconfont icon-danxuan" v-else></text>
					<text class="ml20 color333 fs-28">选项{{ index  + 1}}</text>
				</view>
			</block>
		</view>
		<view class="footer acea-row row-between-wrapper">
			<view class="cancel" @click="cancel">取消</view>
			<view class="num">1/20</view>
			<view class="next" @click="next()">下一题</view>
		</view> -->
		<form @submit="formSubmit">
		<view class="bgwhite color333 fs-30">
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>身高</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="shengao" :value="list.shengao" placeholder="请填写身高" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">cm</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>体重</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="tizhong" :value="list.tizhong" placeholder="请填写体重" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">kg</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>血压数据</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="xueya" :value="list.xueya" placeholder="请填写血压数据" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">mmHg</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>脉搏数据</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="maibo" :value="list.maibo" placeholder="请填写脉搏数据" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">次/分钟</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>血糖数据</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="xuetang" :value="list.xuetang" placeholder="请填写血糖数据" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">mmol/L</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>血脂数据</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="xuezhi" :value="list.xuezhi" placeholder="请填写血脂数据" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">mg/dL</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>心率数据</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="xinlv" :value="list.xinlv" placeholder="请填写心率数据" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">次/分钟</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>呼吸数据</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="huxi" :value="list.huxi" placeholder="请填写呼吸数据" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">次/分钟</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>尿酸数据</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="niaosuan" :value="list.niaosuan" placeholder="请填写尿酸数据" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">mmol/L</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot p30">
				<view>胆固醇数据</view>
				<view class="acea-row row-middle text-right">
					<view class="mr20">
						<input type="text" name="danguchun" :value="list.danguchun" placeholder="请填写胆固醇数据" placeholder-class="color666 fs-28"/>
					</view>
					<view class="fs-28">mmol/L</view>
				</view>
			</view>
			<view class="acea-row row-between p30 bor-bot">
				<view>疾病状况</view>
				<view>
					<textarea class="textarea" name="jibing" :value="list.jibing" placeholder="请说明疾病状况" placeholder-class="fs-28 color666"></textarea>
				</view>
			</view>
			<view class="acea-row row-between p30 bor-bot">
				<view>锻炼频率</view>
				<view>
					<textarea class="textarea" name="duanlian" :value="list.duanlian" placeholder="请说明锻炼次数" placeholder-class="fs-28 color666"></textarea>
				</view>
			</view>
			<view class="acea-row row-between p30 bor-bot">
				<view>吸烟情况</view>
				<view>
					<textarea class="textarea" name="xiyan" :value="list.xiyan" placeholder="请说明吸烟次数" placeholder-class="fs-28 color666"></textarea>
				</view>
			</view>
			<view class="acea-row row-between p30 bor-bot">
				<view>饮酒情况</view>
				<view>
					<textarea class="textarea" name="yinjiu" :value="list.yinjiu" placeholder="请说明饮酒次数" placeholder-class="fs-28 color666"></textarea>
				</view>
			</view>
			<view class="acea-row row-between p30 bor-bot">
				<view>残疾状况</view>
				<view>
					<textarea class="textarea" name="canji" :value="list.canji" placeholder="请说明残疾状况" placeholder-class="fs-28 color666"></textarea>
				</view>
			</view>
			<view class="acea-row row-between p30">
				<view>其它</view>
				<view>
					<textarea class="textarea" name="qita" :value="list.qita" placeholder="请输入..." placeholder-class="fs-28 color666"></textarea>
				</view>
			</view>
		</view>
		<button class="confirm" form-type="submit">点击提交数据</button>
		<!-- <view class="confirm">点击提交数据</view> -->
		</form>
		
		<uni-popup type="center" ref="popup">
			<view class="main bgwhite acea-row row-column row-middle row-center">
				<view class="themecolor fs-40">温馨提示</view>
				<view class="color333 fs-40 bold mt40">您确定提交数据吗？</view>
				<view class="acea-row row-between-wrapper mt40 flexw">
					<view class="btn cancel" @click="close">取消</view>
					<view class="btn confirm" @click="confrim">确定</view>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import{
		jianCreate,
		jiaOrderDetails,
		
	} from '@/api/admin.js';
	export default {
		data() {
			return {
				Sindex:'',
				list:{
					qita:'',
					canji:'',
					yinjiu:'',
					xiyan:'',
					duanlian:'',
					jibing:'',
					danguchun:'',
					niaosuan:'',
					huxi:'',
					xinlv:'',
					xuezhi:'',
					xuetang:'',
					maibo:'',
					xueya:'',
					tizhong:'',
					shengao:'',
					id:'',
				},
				id:'',
				show:false,
				
			};
		},
		onLoad(option){
			this.id = option.id || '';
			if( this.id ) return this.jiaOrderDetails();
			
		},
		methods:{
			jiaOrderDetails(){
				jiaOrderDetails({ id: this.id }).then(res=>{
					this.list = res.data.data;
				}).catch(err=>{
					this.$util.Tips({ title : err })
				})
			},
			formSubmit(e){
				let that = this;
				let value = e.detail.value;
				if( !value.shengao ) return that.$util.Tips({ title : '请填写身高' }) 
				if( !value.tizhong ) return that.$util.Tips({ title : '请填写体重' })
				if( !value.xueya ) return that.$util.Tips({ title : '请填写血压数据' })
				if( !value.maibo ) return that.$util.Tips({ title : '请填写脉搏数据' })
				if( !value.xuetang ) return that.$util.Tips({ title : '请填写血糖数据' })
				if( !value.xuezhi ) return that.$util.Tips({ title : '请填写血脂数据' })
				if( !value.xinlv ) return that.$util.Tips({ title : '请填写心率数据' })
				if( !value.huxi ) return that.$util.Tips({ title : '请填写呼吸数据' })
				if( !value.niaosuan ) return that.$util.Tips({ title : '请填写尿酸数据' })
				if( !value.danguchun ) return that.$util.Tips({ title : '请填写胆固醇数据' })
				if( !value.jibing ) return that.$util.Tips({ title : '请说明疾病状况' })
				if( !value.duanlian ) return that.$util.Tips({ title : '请说明锻炼次数' })
				if( !value.xiyan ) return that.$util.Tips({ title : '请说明吸烟次数' })
				if( !value.yinjiu ) return that.$util.Tips({ title : '请说明饮酒次数' })
				if( !value.canji ) return that.$util.Tips({ title : '请说明残疾状况' })
				// if( !value.qita ) return that.$util.Tips({ title : '请说明残疾状况' })
				that.list = value;
				that.list.id = that.id;
				that.open();
			},
			confrim(){
				let that = this;
				if( that.show ) return;
				that.show = true;
				jianCreate(that.list).then(res=>{
					that.$util.Tips({ title : res.msg },()=>{
						that.show = false;
						that.close();
						uni.navigateBack();
						// uni.redirectTo({
						// 	url: '/pages/answer/bill'
						// })
					})
				}).catch(err=>{
					that.show = false;
					that.$util.Tips({ title : err })
				})
			},
			close(){
				this.$refs.popup.close();
			},
			open(){
				this.$refs.popup.open();
			},
			next(){
				uni.navigateTo({
					url: '/pages/answer/result'
				})
			},
			select(val){
				this.Sindex = val;
			},
			cancel(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.topic{
		padding-bottom: 50rpx;
		
		.main{
			width: 690rpx;
			// height: 500rpx;
			border-radius: 15rpx;
			padding: 50rpx 0;
			
			.btn{
				width: 256rpx;
				height: 92rpx;
				text-align: center;
				line-height: 92rpx;
				border-radius: 50rpx;
				font-size: 36rpx;
				margin: 0 20rpx;
				
				&.cancel{
					background: rgba(176, 176, 176, 0.3);
					color: #9E9E9E;
				}
				&.confirm{
					background: rgba(253, 125, 54, 0.3);
					color: #FD7D36;
				}
			}
		}

		
		.textarea{
			width: 460rpx;
			height: 200rpx;
			border: 1px solid #D8D8D8;
			padding: 20rpx;
			background: #EDEDED;
			border-radius: 15rpx;
		}
		.confirm{
			width: 690rpx;
			height: 104rpx;
			text-align: center;
			line-height: 104rpx;
			border-radius: 52rpx;
			margin: 30rpx auto;
			background: rgba(253, 125, 54, 0.2);
			color: #FD7D36;
			font-size: 30rpx;
		}
		
		.timu{
			padding: 30rpx;
			width: 100%;
			background-color: #ffffff;
			
			.base{
				width: 200rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				box-sizing: border-box;
				border: 1px solid #FD7D36;
				border-radius: 26rpx;
				margin: 30rpx auto 0 auto;
				font-size: 28rpx;
				color: #FD7D36;
			}
		}
		
		.list{
			margin-top: 50rpx;
			width: 100%;
			
			.item{
				width: 690rpx;
				height: 92rpx;
				border-radius: 46rpx;
				background-color: #ffffff;
				box-shadow: 0px 2px 10px 0px rgba(236, 123, 0, 0.12);
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				
				&.on{
					border: 1px solid #FD7D36;
				}
				
				.icon-danxuan,.icon-danxuan-xuanzhong{
					color: #FD7D36;
					font-size: 40rpx;
				}
			}
			
		}
		
		.footer{
			width: 100%;
			height: 152rpx;
			background-color: #ffffff;
			box-shadow: 0px -2px 10px 0px rgba(247, 118, 0, 0.1);
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0 30rpx;
			
			.cancel{
				width: 200rpx;
				height: 80rpx;
				border-radius: 80rpx;
				background: #D4D4D4;
				font-size: 32rpx;
				color: #8A8A8A;
				text-align: center;
				line-height: 80rpx;
			}
			.next{
				width: 200rpx;
				height: 80rpx;
				border-radius: 80rpx;
				background: #FD7D36;
				font-size: 32rpx;
				color: #ffffff;
				text-align: center;
				line-height: 80rpx;
			}
			.num{
				width: 142rpx;
				height: 60rpx;
				background: rgba(247, 118, 0, 0.12);
				border-radius: 30rpx;
				color: #666666;
				font-size: 28rpx;
				text-align: center;
				line-height: 60rpx;
			}
			
		}

		
		
	}
</style>
